<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<u-notice-bar mode="horizontal" type="primary" :list="list"></u-notice-bar>
		<!-- <unifab @dragClick="changeTimeSlot" creatTop="80" creatLeft="85"imageBackgroundSize='100% 100%'  width='100rpx' height='100rpx' image="/static/qiehuan.png" imageWidth="60upx"></unifab>
		<unifab @dragClick="changeCalendar" creatTop="90" creatLeft="85"imageBackgroundSize='100% 100%'  width='100rpx' height='100rpx' image="/static/calendar.png" imageWidth="60upx"></unifab> -->
		<u-select :mask-close-able="false"  v-model="checkJobShow" :list="jobList"  @confirm="confirm" @cancel='cancel'></u-select>
		<u-calendar :closeable="false" :mask-close-able="false" v-model="calendarShow" :mode="mode" @change="changecalcd"></u-calendar>
		<view v-if="showContainer"  class="contaier">
			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">漏签图表（近7日）</text>
					<text class="text-ABC text-blue">ColumnCharts</text>
				</view>
				<button 
					@click="changeTimeSlot" 
					class="cu-btn bg-blue round shadow sm"
					style="margin-right:20rpx;padding:0 20rpx;width: 200rpx;">
					<uni-icons type="loop" size="14" color="white" style="margin-right: 8rpx;"></uni-icons>计划
				</button>
				<button 
					@click="changeCalendar" 
					class="cu-btn bg-blue round shadow sm"
					style="margin-right:20rpx;padding:0 20rpx;width: 200rpx;">
					<uni-icons type="loop" size="14" color="white" style="margin-right: 8rpx;"></uni-icons>日期
				</button>
			</view>
			<view class="chartsMain">
				  <canvas canvas-id="assiwoynpDiPMesvDmnZzbesvxPdhOCC" id="assiwoynpDiPMesvDmnZzbesvxPdhOCC" class="charts" @touchend="tap"/>
			</view>
			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">计划报表（近7日）</text>
					<text class="text-ABC text-blue">TableData</text>
				</view>
			</view>
			<view class="chartsMain">
				<wyb-table ref="table" first-line-fixed='true' :loading='loading'  first-col-bg-color='none' header-ft-color='#fff' header-bg-color='#0081ff' :headers="headers" :contents="contents" height="auto" :url-col="urlCol" />
			</view>
		</view>
	</view>
</template>

<script>
	//import wybTable from '@/components/wyb-table/wyb-table.vue'
	import wybTable from '@/pages-others/components/wyb-table/wyb-table.vue'
	import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";
	import request from '@/common/request.js';
	// 图表
	import uCharts from "@/pages-others/components/ucharts3.6/u-charts.js";
	var uChartsInstance = {};
	export default {
		components: {
			unifab,
			wybTable
		},
		data() {
			return {
				showContainer:true,
				calendarShow:false,
				mode: 'range',
				cWidth: 750,
				cHeight: 750,
				pixelRatio:2,
				requestData:{
					jobId:'',
					TimeSlot:''
				},
				jobId:'',
				checkJobShow:false,
				jobList:[
				],
				list:[
					'移动端数据可能出现展示不完全或不完整情况，如需要查看详细数据或者下载巡检数据报表请移步[维保码]电脑端管理后台'
				],
				loading:false,
				headers: [{
					label: '姓名',
					key: 'RealName',
					width:150
				}, {
					label: '完成率',
					key: 'Rate'
				}, {
					label: '应签',
					key: 'Total'
				}, {
					label: '漏签',
					key: 'Low'
				}, {
					label: '已签',
					key: 'Qian'
				}],
				contents: [],
				title:'漏签报表'
			};
		},
		onLoad() {
			this.getQrcodeJobList();
			
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(650);
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
		},
		computed: {

		},
		onReady() {
		},
		mounted() {
		},
		methods: {
			//showContainer
			cancel(e){
				console.log('cancel')
				console.log(e);
				this.title=e[0].label
				this.requestData.jobId=e[0].value
				this.getServerData1(e[0].value);
				this.showContainer=true
			},
			changeCalendar(){
				this.calendarShow=true
				this.showContainer=false
			},
			
			changeTimeSlot(){
				this.checkJobShow=true;
				this.showContainer=false
			},
			changecalcd(e) {
				console.log(e);
				this.requestData.TimeSlot=e.startDate+ " - "+e.endDate
				this.getServerData1();
				
				this.showContainer=true
			},
			getServerData1() {
				uni.showLoading({
					title: '加载中'
				})
				let that=this
				let opts = {
					url: 'api/GetMissedQrcodeSignData',
					method: 'get'
				};
				that.contents=[]
				request.httpTokenRequest(opts,that.requestData).then(res1 => {
					uni.hideLoading();
					if(res1.data.code == 1){
						let res = {
						categories: res1.data.data.x,
						series: [
							  {
								name: "应签",
								data:  res1.data.data.allY
							  },
							  {
								name: "已签",
								data:  res1.data.data.ownY
							  }
							]
						};
						that.drawCharts('assiwoynpDiPMesvDmnZzbesvxPdhOCC', res);
						
						let formtable=res1.data.data.tableList
						for(let i=0;i<formtable.length;i++){
							let row={}
							row.RealName=formtable[i].RealName
							row.Rate=formtable[i].Rate
							row.Total=formtable[i].Total
							row.Low=formtable[i].Low
							row.Qian=formtable[i].Qian
							that.contents.push(row)
						}
					}
				})
				
			},
			drawCharts(id,data){
			  const ctx = uni.createCanvasContext(id, this);
			  uChartsInstance[id] = new uCharts({
				type: "bar",
				context: ctx,
				width: this.cWidth,
				height: this.cHeight,
				categories: data.categories,
				series: data.series,
				fontSize:10,
				enableScroll:true,
				animation: true,
				canvas2d: true, //开启canvas2d
				background: "#FFFFFF",
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,30,0,5],
				//padding: [10,15,0,2],
				legend: {},
				xAxis: {
				  boundaryGap: "justify",
				  disableGrid: false,
				  min: 0,
				  axisLine: false,
				  max: 40
				},
				yAxis: {},
				extra: {
				  bar: {
					type: "group",
					width: 30,
					meterBorde: 1,
					meterFillColor: "#FFFFFF",
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "custom",
					barBorderCircle: true,
					seriesGap: 2,
					categoryGap: 2
				  }
				}
			  });
			},
			tap(e){
			  uChartsInstance[e.target.id].touchLegend(e);
			  uChartsInstance[e.target.id].showToolTip(e);
			},
			confirm(e) {
				// console.log(e);
				// console.log(e[0].value);
				this.title=e[0].label
				this.requestData.jobId=e[0].value
				this.getServerData1(e[0].value);
				this.showContainer=true
			},
			getDataList(){
				let that=this
				let opts = {
					url: 'api/GetMissedQrcodeSignData',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						for(let i = 0; i < res.data.data.length; i++) {
							let data = res.data.data[i];
							if(data.JobTask==1){
								let item={}
								item.label=data.JobName
								item.value=data.Id
								that.jobList.push(item);
							}
						}
					}
				})
			},
			getQrcodeJobList(){
				let that=this
				let opts = {
					url: 'api/GetAdminQrcodeJob',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						this.title=res.data.data[0].JobName
						that.requestData.jobId=res.data.data[0].Id;
						for(let i = 0; i < res.data.data.length; i++) {
							let data = res.data.data[i];
							if(data.JobTask==1){
								let item={}
								item.label=data.JobName
								item.value=data.Id
								that.jobList.push(item);
							}
						}
						that.getServerData1();
					}
				})
			},
		
			// ucharts end

		}
	};
</script>

<style lang="scss" scoped>
	.charts{
	    width: 750rpx;
	    height: auto;
	  }
	.container {
		position: relative;
	}
	
	.chartsMain {
		width: 750rpx;
		height: 680rpx;
		padding-top: 15rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;
		.charts {
			width: 750rpx;
			height: 650rpx;
			box-sizing: border-box;
		}
	}
	/* 添加标题行布局样式 */
	.cu-bar .action.sub-title {
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	/* 按钮样式调整 */
	.cu-btn.bg-blue {
	  padding: 0 20rpx;
	  line-height: 1.8;
	  .cuIcon-refresh {
	    font-size: 36rpx;
	    vertical-align: middle;
	  }
	}
</style>
